<template>
  <div id="question-txt">
    <div class="questionDetail">
      <el-scrollbar>
        <div v-html="questionDetail" class="txt"></div>
      </el-scrollbar>
    </div>
    <div class="download">
      <el-button icon="el-icon-download" size="mini" @click="download" class="btn" :disabled="!questionDetail">下载</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {},
  filters: {},
  props: {
    questionDetail: {
      type: String
    },
    lawValue: {
      type: Number
    }
  },
  data () {
    return {
    }
  },
  watch: {
  },
  computed: {
    ...mapGetters({
      token: 'token'
    })
  },
  created () {},
  mounted () {
  },
  activated () {},
  beforeDestroy () {
  },
  methods: {
    download () {
      let downloadURL = this.$api.downloadLawDetailURL + `?law_id=${this.lawValue}&_token=${this.token}`
      window.open(downloadURL)
    }
  }
}
</script>

<style lang="scss" scoped>
#question-txt {
  height: 100%;
  .questionDetail {
    box-sizing: border-box;
    height: calc(100% - 60px);
    .txt{
      padding: 24px;
    }
  }
  .download {
    height: 60px;
    background: #f8f8f8;
    border-radius: 0px 0px 3px 3px;
    padding-right: 15px;
    .btn{
      width: 78px;
      height: 32px;
      float: right;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>

<style lang="scss">
#question-txt /deep/ {
  p{
    >span{
      font-size: 14px !important;
    }
    &:first-child{
      // padding: 24px 0;
      padding-bottom: 20px;
      >span{
        font-weight: bold !important;
        font-size: 24px !important;
      }
    }
  }
}
</style>
